import {Link, useNavigate, useParams} from "react-router-dom";
import React, { useContext, useEffect, useState } from "react";
import { UserContext } from "../context/userContext";
import axios from "axios";
import {Avatar, Button, Card, Empty, Grid, NavBar, Rate, Space} from "antd-mobile";

const UserDetail = () => {
  const [avatar, setAvatar] = useState('');
  const [name, setName] = useState('');
  const [createdAt, setCreatedAt] = useState(null);
  const [stars, setStars] = useState('4.5');
  const [technique, setTechnique] = useState('');
  const [experience, setExperience] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();
  const { currentUser } = useContext(UserContext);
  const token = currentUser?.token;

  const { id } = useParams();

  const publish = () => {
    navigate('/create');
  }
  const back = () =>{
    navigate(-1)
  }

  const likeUser = async (value) => {

    const response = await axios.post(
        `${process.env.REACT_APP_BASE_URL}/posts/like/${id}/${value}`,
        {},
        { withCredentials: true, headers: { Authorization: `Bearer ${token}` } }
    );

    setStars(response?.data.credits)
  }

  useEffect(() => {
    const getUser = async () => {
      if (!id) {
        console.log('no user id')
        return;
      }
      try {
        const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/users/${id}`);
        const {name, credits, avatar, updatedAt, technique, experience} = response.data;
        setName(name);
        setStars(credits);
        setAvatar(avatar);
        setCreatedAt(updatedAt);
        setTechnique(technique);
        setExperience(experience);
      } catch (error) {
        console.log(error);
      }
    };

    getUser();
  }, [id]);

  return <section className="post-details">
    <NavBar style={{'backgroundColor': 'rgba(80, 62, 157, 1)', 'color': 'white'}} onBack={back}>用户资料</NavBar>
    <div className="header">
      <Space block direction='vertical' align="center">
          <Avatar style={{'--size': '64px'}} src={`${process.env.REACT_APP_ASSETS_URL}/uploads/${avatar}`} alt=""/>
          <Space block>
            <span className="text_3">{name}</span>
          </Space>
          <Space>
            <span className="text_5">当前评分: <Rate style={{'--star-size':'15px'}} value={Number(stars)}></Rate></span>
          </Space>

      </Space>

    </div>
    <div className="part2">
      <Card title='擅长技能'>
        {technique||<Empty />}
      </Card>
    </div>
    <div className="part2">
      <Card title='项目经验'>
        {experience||<Empty />}
      </Card>
    </div>

    <Card>
      {error && <p className="error text_4">{error}</p>}
      <Grid direction='horizontal' justify='between' columns={2}>
        <Space direction='vertical' align='start'>
          <span className="text_7">给对方一个评分吧</span>
          <Rate onChange={likeUser} value={Number(stars)} style={{
            '--star-size': '15px'
          }}></Rate>
        </Space>
        <Space>
          {id === currentUser.id && <Button onClick={publish} block style={{
        "--background-color": 'rgba(80, 62, 157, 1)',
        "--text-color": 'rgba(255, 255, 255, 1)',
        "--border-radius": '12px',
        'width':"180px"
      }} size='large'>发布需求</Button>}
        </Space>
      </Grid>
    </Card>
  </section>
};

export default UserDetail;


